<template>
  <div>
    <div class="title">
      <span class="title-name">存储数据分析</span>
      <span class="update-date" v-text="'更新时间：' + updateDate"/>
      <el-button type="success" @click="refresh">刷新</el-button>
    </div>
    <div id="expertDistrict" style="width: 700px; height: 500px;"/>
    <div id="expertAgeDistribution" style="width: 700px; height: 500px;"/>
    <div id="expertDomainDistribution" style="width: 700px; height: 500px;"/>
    <div id="expertHonorDistribution" style="width: 700px; height: 500px;"/>
    <div id="teamDomainDistribution" style="width: 700px; height: 500px;"/>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import '@/config/china';
export default {
  name: "StorageDetailsData",
  data() {
    return {
      updateDate: "",
      expertDistrict: {},
      expertAgeDistribution: {},
      expertDomainDistribution: {},
      expertHonorDistribution: {},
      teamDomainDistribution: {}
    };
  },
  methods: {
    getExpertDistrict() {
      this.$http.get("api/statistics/expertDistrict?showHidden=false&districtLevel=p").then(res => {
        const pMap = require('@/config/pMap.json');
        const data_list = [];
        for (const item of res.data.data) {
          const name = pMap[item.name];
          data_list.push({name: name, value: item.count});
        }
        const color = ["#91CC75", "#3BA272", "#FAC858", "#EE6666"];
        const option = {
          color: color,
          title: {
            text: "专家常驻地区分布",
            left: "center",
            padding: 10,
            subtextStyle: {verticalAlign: "middle"},
          },
          tooltip: {
            trigger: "item",
            formatter(t) {
              return t.seriesType
                  ? t.data && t.data.value
                      ? t.name + ": " + t.data.value
                      : t.name + ": 0"
                  : t.name;
            },
          },
          visualMap: {
            type: "piecewise",
            splitNumber: 3,
            pieces: [
              {min: 50, label: "50人以上", color: color[3]},
              {min: 20, max: 50, label: "21-50", color: color[2]},
              {max: 20, min: 11, label: "11-20", color: color[1]},
              {max: 10, min: 0, label: "10人以下", color: color[0]},
            ],
            textStyle: {color: "black"},
            min: 0,
            max: 20,
            left: "left",
            top: "bottom",
            calculable: !0,
            show: !0,
            seriesIndex: 0,
          },
          geo: {
            map: "china",
            zoom: 1.2,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
          },
          series: [
            {
              type: "map",
              map: "china",
              showLegendSymbol: !1,
              zoom: 1.2,
              layoutCenter: ["50%", "50%"],
              layoutSize: "100%",
              label: {
                normal: {
                  show: true,
                  textStyle: {color: "rgba(255,255,255,0.2)"},
                },
                emphasis: {show: false},
              },
              data: data_list,
            },
          ],
        }
        this.expertDistrict.setOption(option);
      });
    },
    getExpertAgeDistribution() {
      this.$http.get("api/statistics/expertAgeDistribution").then(res => {
        const data_list = [];
        let nodata_count = 0;
        let total_count = 0;
        for (const item of res.data.data) {
          if ("0s" !== item.name) {
            data_list.push({value: item.count, name: item.name.replace("s", "年代")})
            total_count += item.count
          } else {
            nodata_count = item.count
          }
        }
        const subtext = "纳入专家年龄分布统计的有" + total_count + "人（" + nodata_count + "人没有年龄数据）";
        const option = {
          title: {
            text: "专家年龄分布",
            subtext: subtext,
            left: "center",
          },
          tooltip: {trigger: "item"},
          legend: {
            orient: "horizontal",
            left: "center",
            top: "60",
          },
          series: [
            {
              name: "专家年龄段",
              type: "pie",
              radius: "50%",
              avoidLabelOverlap: !1,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {normal: {formatter: "{b}：{c}人 ({d}%)"}},
              data: data_list,
            },
          ],
        };
        this.expertAgeDistribution.setOption(option);
      });
    },
    getExpertDomainDistribution() {
      this.$http.get("api/statistics/expertDomainDistribution").then(res => {
        const data_list = [];
        let total_count = 0
        for (const item of res.data.data) {
          data_list.push({value: item.count, name: item.name})
          total_count += item.count
        }
        const subtext = "纳入专家领域分布统计的共" + total_count + "人";
        const option = {
          title: {
            text: "专家领域分布",
            subtext: subtext,
            left: "center",
          },
          tooltip: {trigger: "item"},
          legend: {
            orient: "horizontal",
            left: "center",
            top: "60",
          },
          series: [
            {
              name: "专家领域分布",
              type: "pie",
              radius: "50%",
              avoidLabelOverlap: !1,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {normal: {formatter: "{b}：{c}人 ({d}%)"}},
              data: data_list,
            },
          ],
        };
        this.expertDomainDistribution.setOption(option);
      });
    },
    getExpertHonorDistribution() {
      this.$http.get("api/statistics/expertHonorDistribution").then(res => {
        const data_list = [];
        let total_count = 0
        for (const item of res.data.data) {
          data_list.push({value: item.count, name: item.name})
          total_count += item.count
        }
        const subtext = "纳入专家头衔荣誉统计的奖项" + total_count + "人次";
        const option = {
          title: {
            text: "专家头衔荣誉统计",
            subtext: subtext,
            left: "center",
          },
          tooltip: {trigger: "item"},
          legend: {
            orient: "horizontal",
            left: "center",
            top: "60",
          },
          series: [
            {
              name: "专家头衔荣誉",
              type: "pie",
              radius: "50%",
              avoidLabelOverlap: !1,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                normal: {formatter: "{b}：{c}人次 ({d}%)"},
              },
              data: data_list,
            },
          ],
        };
        this.expertHonorDistribution.setOption(option);
      });
    },
    getTeamDomainDistribution() {
      this.$http.get("api/statistics/teamDomainDistribution").then(res => {
        const data_list = [];
        let total_count = 0
        for (const item of res.data.data) {
          data_list.push({value: item.count, name: item.name})
          total_count += item.count
        }
        const subtext = "纳入设计团队领域分布统计的共" + total_count + "个"
        const option = {
          title: {
            text: "设计团队领域分布",
            subtext: subtext,
            left: "center",
          },
          tooltip: {trigger: "item"},
          legend: {
            orient: "horizontal",
            left: "center",
            top: "60",
          },
          series: [
            {
              name: "设计团队领域分布",
              type: "pie",
              radius: "50%",
              avoidLabelOverlap: !1,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {normal: {formatter: "{b}：{c}个 ({d}%)"}},
              data: data_list,
            },
          ],
        };
        this.teamDomainDistribution.setOption(option);
      });
    },
    formatDate() {
      var t = new Date(),
          e = t.getFullYear(),
          a = t.getMonth() + 1,
          n = t.getDate(),
          i = t.getDay(),
          o = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ],
          s = t.getHours();
      s = s < 10 ? "0" + s : s;
      var r = t.getMinutes();
      r = r < 10 ? "0" + r : r;
      var c = t.getSeconds();
      (c = c < 10 ? "0" + c : c),
          (this.updateDate = ""
              .concat(e, "/")
              .concat(a, "/")
              .concat(n, " ")
              .concat(s, ":")
              .concat(r, ":")
              .concat(c, " ")
              .concat(o[i]));
    },
    initMonthChart() {
      this.expertDistrict = echarts.init(document.getElementById('expertDistrict'));
      this.expertDistrict.clear()
      this.expertAgeDistribution = echarts.init(document.getElementById('expertAgeDistribution'));
      this.expertAgeDistribution.clear()
      this.expertDomainDistribution = echarts.init(document.getElementById('expertDomainDistribution'));
      this.expertDomainDistribution.clear()
      this.expertHonorDistribution = echarts.init(document.getElementById('expertHonorDistribution'));
      this.expertHonorDistribution.clear()
      this.teamDomainDistribution = echarts.init(document.getElementById('teamDomainDistribution'));
      this.teamDomainDistribution.clear()
    },
    refresh() {
      this.getExpertDistrict()
      this.getExpertAgeDistribution()
      this.getExpertDomainDistribution()
      this.getExpertHonorDistribution()
      this.getTeamDomainDistribution()
      this.formatDate()
    },
  },
  mounted() {
    this.initMonthChart()
    this.refresh()
  },
}
</script>

<style scoped>
.title {
  margin-top: 10px;
}

.title .title-name {
  font-weight: 700;
  padding: 10px;
}

.title .update-date {
  padding: 10px;
}

#expertAgeDistribution,
#expertDistrict,
#expertDomainDistribution,
#expertHonorDistribution,
#teamDomainDistribution {
  float: left;
  border: 2px solid grey;
  margin: 6px;
}

</style>